<template>
  <div class="wrap-hot">
    <template v-if="!skeletonLoading">
      <div class="header">
        <div class="title">
          <img :src="hotImg" alt="" />
          <span>Hot selling platform</span>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="header">
        <el-skeleton animated>
          <template #template>
            <div class="header-box">
              <el-skeleton-item class="line-lf" variant="p" />
            </div>
          </template>
        </el-skeleton>
      </div>
    </template>

    <div class="content">
      <div
        v-for="item in hotList"
        :class="item.imgList.length === 1 ? 'item-1' : 'item-4'"
      >
        <template v-if="!item.loading">
          <div v-for="img in item.imgList">
            <el-image
              :src="img.imageUrl"
              style="width: 100%; height: 100%"
              fit="contain"
            />
          </div>
          <!-- 蒙层 -->
          <div class="item-mask" @click="searchHotData(item)">
            <span>{{ item.name }}</span>
          </div>
        </template>
        <template v-else>
          <p class="content-box">
            <el-skeleton animated style="width: 100%; height: 100%">
              <template #template>
                <el-skeleton-item class="item" variant="image" />
              </template>
            </el-skeleton>
          </p>
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import hotImg from '@/assets/images/hot.png'
import router from '@/router/router'
import { getProductData } from '@/api/home/index'

const hotList = ref([
  {
    name: 'Aliexpress hot style',
    loading: true,
    imgList: []
  },
  {
    name: 'TikTok hot style',
    loading: true,
    imgList: []
  },
  {
    name: 'Amazon hot style',
    loading: true,
    imgList: []
  }
])

const skeletonLoading = ref(false)

const searchHotData = (item: any) => {
  router.push('/searchdetail')
  localStorage.setItem('searchValue', item.name)
}

// 获取热搜数据
const getHotSells = () => {
  // 获取Aliexpress hot style 数据
  getHotItemData('aliexpress', 'Aliexpress hot style', 4)
  getHotItemData('tiktok', 'TikTok hot style', 1)
  getHotItemData('amazon', 'Amazon hot style', 4)
}

const getHotItemData = (type: string, keywords: string, size: number) => {
  let postData = {
    currentPageIndex: 1,
    pageSize: size,
    totalCount: 10,
    keywords,
    country: localStorage.getItem('language')
  }
  getProductData(postData)
    .then((res) => {
      skeletonLoading.value = false
      if (type === 'aliexpress') {
        hotList.value[0].loading = false
        hotList.value[0].imgList = res.data.items
      }
      if (type === 'tiktok') {
        hotList.value[1].loading = false
        hotList.value[1].imgList = res.data.items
      }
      if (type === 'amazon') {
        hotList.value[2].loading = false
        hotList.value[2].imgList = res.data.items
      }
    })
    .catch(() => {
      hotList.value = hotList.value.map((item) => ({
        ...item,
        loading: false
      }))
      skeletonLoading.value = false
    })
}

onMounted(() => {
  skeletonLoading.value = true
  getHotSells()
})
</script>
<style lang="scss" scoped>
.wrap-hot {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .header {
    height: 72px;
    border-bottom: 1px solid #e9e9ec;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 24px;
      display: flex;
      align-items: center;
    }
    .more {
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: space-around;
    padding: 24px 0;
    .item-1,
    .item-4 {
      width: 360px;
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      position: relative;
      .item-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 32px;
        color: #fff;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.3);
        > span {
          filter: drop-shadow(0px 0px 4px #00000080);
        }
      }
    }
    .item-4 > div {
      width: 50%;
      height: 50%;
    }
  }
  // 骨架屏
  .header-box {
    height: 40px;
    display: flex;
    justify-content: space-between;
    .line-lf {
      width: 300px;
      height: 100%;
    }
    .line-rt {
      width: 160px;
      height: 100%;
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .item {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
